<!DOCTYPE html>
<html>
<!--  
  
 -->
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=0">
<title>月卡充值</title>
<link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.3/style/weui.min.css"/>
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css"/>
<link rel="stylesheet" href="/css/monthcard/newMonthCard.css"/>		
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/swiper.js" charset="utf-8"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script> 
</head>
<body>
   <div id="newmonthcard">
      <div id="newmonthcard_top">
          <div class="swiper-container">
	           <div class="swiper-wrapper">
	             <div class="swiper-slide"><img src="http://jqweui.com/dist/demos/images/swiper-1.jpg" alt=""></div>
	             <div class="swiper-slide"><img src="http://jqweui.com/dist/demos/images/swiper-2.jpg" alt=""></div>
	             <div class="swiper-slide"><img src="http://jqweui.com/dist/demos/images/swiper-3.jpg" alt=""></div>
	         </div>
         	<div class="swiper-pagination"></div>
         </div>
      </div>
      
      <div id="newmonthcard_center">
        <div style="height: 1%;width: 100%"></div>
        <div id="newmonthcard_center_one">
           <div class="newmonthcard_center_one_center"> 
             <div id="newmonthcard_center_one_left">
                <div style="height: 15%;width: 100%"></div>
                <div style="height: 70%;width: 100%">
                  <div id="newmonthcard_center_one_left_left">
                      <div id="newmonthcard_center_one_left_left_top">
                          			一个月
                      </div>
                      <div id="newmonthcard_center_one_left_left_bottom">
                               		  不限次
                      </div>
                  </div>
                  <div id="newmonthcard_center_one_left_right">
                           <span>$</span>&nbsp;<span id="oneLeftMoney"></span>
                  </div>
                </div>
                <div style="height: 15%;width: 100%"></div>
             </div>
             <div id="newmonthcard_center_one_right">
                  <div style="height: 15%;width: 100%"></div>
                  
		                <div style="height: 70%;width: 100%">
		                   <div id="newmonthcard_center_one_right_left">
	                      <div id="newmonthcard_center_one_right_left_top">
	                          			二个月
	                      </div>
	                      <div id="newmonthcard_center_one_right_left_bottom">
	                               		  不限次
	                      </div>
	                   </div>
	                   <div id="newmonthcard_center_one_right_right">
	                           <span>$</span>&nbsp;<span id="oneRightMoney"></span>
	                  </div>

	                </div>
	                
	                <div style="height: 15%;width: 100%"></div>
             </div>
           </div>
        </div>
        <div style="height: 1%;width: 100%"></div>
        <div id="newmonthcard_center_two">
          <div class="newmonthcard_center_one_center">
             <div id="newmonthcard_center_two_left">
                 <div style="height: 15%;width: 100%"></div>
                 <div style="height: 70%;width: 100%;">
                     <div id="newmonthcard_center_two_left_left">
                         <div id="newmonthcard_center_two_left_left_top">
	                          			三个月
	                      </div>
	                      <div id="newmonthcard_center_two_left_left_bottom">
	                               		  不限次
	                      </div>
                     </div>
                     <div id="newmonthcard_center_two_left_right">
                        <span>$</span>&nbsp;<span id="twoLeftMoney"></span>
                     </div>
                     
                </div>
                <div style="height: 15%;width: 100%"></div>
             
             </div>
             <div id="newmonthcard_center_two_right">
                  <div style="height: 15%;width: 100%"></div>
                  <div style="height: 70%;width: 100%;">
                     <div id="newmonthcard_center_two_right_left">
                         <div id="newmonthcard_center_two_right_left_top">
	                          			四个月
	                      </div>
	                      <div id="newmonthcard_center_two_right_left_bottom">
	                               		  不限次
	                      </div>
                     </div>
                     <div id="newmonthcard_center_two_right_right">
                        <span>$</span>&nbsp;<span id="twoRightMoney"></span>
                     </div>
                     
                </div>
                <div style="height: 15%;width: 100%"></div>

             </div>
          </div>
        </div>
        <div style="height: 1%;width: 100%"></div>
        <div id="newmonthcard_center_three">
         <div class="newmonthcard_center_one_center">
             <div id="newmonthcard_center_three_left">
                <div style="height: 15%;width: 100%"></div>
                 <div style="height: 70%;width: 100%;">
                    <div id="newmonthcard_ceter_three_left_left">
                          <div id="newmonthcard_center_three_right_left_top">
	                          			五个月
	                      </div>
	                      <div id="newmonthcard_center_three_right_left_bottom">
	                               		  不限次
	                      </div>
                    </div>
                    <div id="newmonthcard_center_three_left_right">
                  			  <span>$</span>&nbsp;<span  id="threeLeftMoney"></span>
                    </div>
                     
                </div>
                <div style="height: 15%;width: 100%"></div>
             
             
             </div>
             <div id="newmonthcard_center_three_right">
                  <div style="height: 15%;width: 100%"></div>
                  <div style="height: 70%;width: 100%;">
                     <div  style="width: 50%;height: 100%;float: left;" id="#newmonthcard_ceter_three_right_left_xx">
                         <div id="newmonthcard_center_three_right_left_top">
	                          			六个月
	                      </div>
	                      <div id="newmonthcard_center_three_right_left_bottom">
	                               		  不限次
	                      </div>
                     </div>
                     <div id="newmonthcard_center_three_right_right">
                        <span>$</span>&nbsp;<span id="threeRightMoney"></span>
                     </div>
                     
                </div>
                <div style="height: 15%;width: 100%"></div>
             </div>
          </div>
        </div>
        <div style="height: 1%;width: 100%"></div>
        <div id="newmonthcard_center_four">
         <div id="newmonthcard_center_four_center"> 
              <div id="newmonthcard_center_four_center_top"></div>
              <div id="newmonthcard_center_four_center_center">
                 <div id="newmonthcard_center_four_center_center_left">
                    <div id="newmonthcard_center_four_center_center_top">
                         			一年
                    
                    </div>
                    <div id="newmonthcard_center_four_center_center_bottom">
                                	不限次
                    </div>
                                  
                 </div>
                 <div id="newmonthcard_center_four_center_center_right">
                          
                           <span>$</span>&nbsp;<span id="fourMoney"></span>
                    
                 </div>    
              </div>
              <div id="newmonthcard_center_four_center_bottom"></div>
         </div>
        </div> 
      </div>
      <div id="newmonthcard_bottom">
         <div id="newmonthcard_bottom_top"></div>
         <div id="newmonthcard_bottom_center">
           <div id="newmonthcard_bottom_center_center">
              <div id="newmonthcard_bottom_center_left">
                 <span id="newmonthcard_bottom_center_left_money"></span><span id="newmonthcard_bottom_center_left_money_font">元</span>
              </div>
              <div >
                 <a id="newmonthcard_bottom_center_right" href="javascript:;" class="weui-btn weui-btn_primary">开通</a>
              </div>
           </div>
         </div>
         <div id="newmonthcard_bottom_bottom">
              <input id="openId" type="hidden" th:value="${openId}" />
		      <input id="type" type="hidden" th:value="${type}" />
		      <input id="carFieldId" type="hidden" th:value="${carFieldId}"/>
		      <input id="serviceId" type="hidden" th:value="${serviceId}"/>
              <input id="carPlate" type="hidden" th:value="${carPlate}"/>
         </div>
      </div>
   </div>
  


</body>
<script type="text/javascript">
	var allHeight = window.innerHeight;
	$("#newmonthcard").css("height", allHeight + "px");
</script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',
   {
          speed:2000,//播放速度
          autoHeight:true,
          loop:true,//是否循环播放
          setWrapperSize:true,
          autoplay: 
          {
            delay: 5000,
            disableOnInteraction: false,
          },
          pagination:  '.swiper-pagination',//分页
          effect : 'slide',//动画效果
     }
);


var openId = $("#openId").val();   
var type = $("#type").val();    
var carFieldId = $("#carFieldId").val();    
var serviceId = $("#serviceId").val();    
var carPlate = $("#carPlate").val();   

//alert("openId"+openId+"type"+type+"carFieldId"+carFieldId+"serviceId"+serviceId+"carPlate"+carPlate);    

var money = null;
var tariffID = null;  //缴费类型
var tariffName = null; //车型
var number = 1;
getCarCostType();

document.getElementById("oneLeftMoney").innerText = money * 1;
document.getElementById("oneRightMoney").innerText = money * 2;
document.getElementById("twoLeftMoney").innerText = money * 3;
document.getElementById("twoRightMoney").innerText = money * 4;
document.getElementById("threeLeftMoney").innerText = money * 5;
document.getElementById("threeRightMoney").innerText = money * 6;
document.getElementById("fourMoney").innerText = money * 12;


var countMoney = document.getElementById("newmonthcard_bottom_center_left_money");
countMoney.innerText = money;


var oneLeft = document.getElementById("newmonthcard_center_one_left");
var oneRight = document.getElementById("newmonthcard_center_one_right");
var twoLeft = document.getElementById("newmonthcard_center_two_left");
var twoRight = document.getElementById("newmonthcard_center_two_right");
var threeLeft = document.getElementById("newmonthcard_center_three_left");
var threeRight = document.getElementById("newmonthcard_center_three_right");
var four = document.getElementById("newmonthcard_center_four_center");



$("#newmonthcard_center_one_left").click(function(){
   oneLeft.style.borderColor =  "red";	
   oneRight.style.borderColor =  "#cccccc";	
   twoLeft.style.borderColor =  "#cccccc";	
   twoRight.style.borderColor =  "#cccccc";	
   threeLeft.style.borderColor =  "#cccccc";
   threeRight.style.borderColor =  "#cccccc";		
   four.style.borderColor =  "#cccccc";	
   countMoney.innerText = $("#oneLeftMoney").text();
   number = 1;
   
})

$("#newmonthcard_center_one_right").click(function(){
	   oneLeft.style.borderColor =  "#cccccc";	
	   oneRight.style.borderColor =  "red";	
	   twoLeft.style.borderColor =  "#cccccc";	
	   twoRight.style.borderColor =  "#cccccc";	
	   threeLeft.style.borderColor =  "#cccccc";	
	   threeRight.style.borderColor =  "#cccccc";		
	   four.style.borderColor =  "#cccccc";	
	   countMoney.innerText = $("#oneRightMoney").text();
	   number = 2;
	
})

$("#newmonthcard_center_two_left").click(function(){
   oneLeft.style.borderColor =  "#cccccc";	
   oneRight.style.borderColor =  "#cccccc";	
   twoLeft.style.borderColor =  "red";	
   twoRight.style.borderColor =  "#cccccc";	
   threeLeft.style.borderColor =  "#cccccc";
   threeRight.style.borderColor =  "#cccccc";		
   four.style.borderColor =  "#cccccc";
   countMoney.innerText = $("#twoLeftMoney").text();
   number = 3;
})

$("#newmonthcard_center_two_right").click(function(){
	   oneLeft.style.borderColor =  "#cccccc";	
	   oneRight.style.borderColor =  "#cccccc";	
	   twoLeft.style.borderColor =  "#cccccc";	
	   twoRight.style.borderColor =  "red";	
	   threeLeft.style.borderColor =  "#cccccc";
	   threeRight.style.borderColor =  "#cccccc";		
	   four.style.borderColor =  "#cccccc";	
	   countMoney.innerText = $("#twoRightMoney").text();
	   number = 4;
	
})

$("#newmonthcard_center_three_left").click(function(){
   oneLeft.style.borderColor =  "#cccccc";	
   oneRight.style.borderColor =  "#cccccc";	
   twoLeft.style.borderColor =  "#cccccc";	
   twoRight.style.borderColor =  "#cccccc";	
   threeLeft.style.borderColor =  "red";
   threeRight.style.borderColor =  "#cccccc";		
   four.style.borderColor =  "#cccccc";	
   countMoney.innerText = $("#threeLeftMoney").text();
   number = 5;
})

$("#newmonthcard_center_three_right").click(function(){
	   oneLeft.style.borderColor =  "#cccccc";	
	   oneRight.style.borderColor =  "#cccccc";	
	   twoLeft.style.borderColor =  "#cccccc";	
	   twoRight.style.borderColor =  "#cccccc";	
	   threeLeft.style.borderColor =  "#cccccc";		
	   threeRight.style.borderColor =  "red";		
	   four.style.borderColor =  "#cccccc";
	   countMoney.innerText = $("#threeRightMoney").text();
	   number = 6;
	
})

$("#newmonthcard_center_four_center").click(function(){
	   oneLeft.style.borderColor =  "#cccccc";	
	   oneRight.style.borderColor =  "#cccccc";	
	   twoLeft.style.borderColor =  "#cccccc";	
	   twoRight.style.borderColor =  "#cccccc";	
	   threeLeft.style.borderColor =  "#cccccc";		
	   threeRight.style.borderColor =  "#cccccc";		
	   four.style.borderColor =  "red";	
	   countMoney.innerText = $("#fourMoney").text();
	   number = 12;
	
})
//根据车辆的收费类型
function getCarCostType(){
	
	$.ajax({
		url:"/third/get/month/card/cost/type?id="+carFieldId,
	    async:false,
		dataType:"json",
		context:this,
		//contentType:"application/json;charset=UTF-8",
		success:function(result){
			if(result.status == "0"){
				if(result.datas.status == "true"){
					tariffID = result.datas.data[0].tariffID;
					tariffName = result.datas.data[0].tariffName;
					money = result.datas.data[0].charge;     
				}
			}else{	
			}
		},
		error:function(error){	
		}
   })
}


//开通月卡
$("#newmonthcard_bottom_center_right").click(function(){
	
	
	var money = $("#newmonthcard_bottom_center_left_money").text();
	if(money == null || money == "" || money <= 0){
		$.toast("支付金额有误", "forbidden");
		return;
	}
	
    $.showLoading('加载中');
	var obj = {
	   openId:openId,
	   type:type,
	   money:"0.01",
	   carFieldId:carFieldId,
	   serviceId:serviceId,
	   carPlate:carPlate,
	   number:number,
	   payMonthCard:0,
	   tariffID:tariffID,
	   tariffName:tariffName
	}
    
	
	$.ajax({
		url:"/pay/month/card/recharge",
		method:"POST",
		data:JSON.stringify(obj),
		dataType:"json",
		context:this,
		contentType:"application/json;charset=UTF-8",
		success:function(result){
			$.hideLoading();
			if(result.status == "0"){
				if(type == "weixin"){
					onPay(result.datas);	
				}else{
					onAlipay(result.datas);
				}
			}else{
				$.toast(result.err, "forbidden");
			}
		},
		error:function(error){
			$.hideLoading();
			$.toast(error.err, "forbidden");
		}
   })
})


//微信
	function onPay(data){
		WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                {
                  appId:data.appId, //公众号名称，由商户传入
                  timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
                  nonceStr: data.nonceStr, //随机串
                  package: data.package,
                  signType: data.signType, //微信签名方式：
                  paySign: data.paySign //微信签名
                },
                function(res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                           //支付成功的同步    
                	  location.href = "/pay/advert";
                        }
                   }
            );
	}
	//支付宝
	function onAlipay(data){
		   AlipayJSBridge.call("tradePay",{
			  tradeNO:data.pre_trade_no
			  },function(result){
			  if(result.resultCode == "9000" ) {
			     //支付成功
				  location.href = "/pay/advert";
			  }else if(result.resultCode == "8000"){
				  //正在处理
			  }else if(result.resultCode == "4000"){
				  //订单失败
			  }else if(result.resultCode == "6001"){
				  //中途取消
			  }else if(result.resultCode == "6002"){
				  //网络错误
			  }
			});  
	}
</script>   
</html>